<template>
	<view class="container">
		<view class="header">
			<view class="point-total">
				<view class="point-total__value">{{totalPoint}}</view>
				<view class="point-total__txt">可用积分</view>
			</view>
			<view class="point-rule" style="display: none;">积分规则</view>
		</view>
		<view class="center" v-if="toMoney=='开启'">
			<view class="title">花积分</view>
			<view class="item"><text class="icon">&#xe77a;</text><view class="detail"><view>积分抵现</view><view class="tip">消费可以积分抵现</view></view><button class="item-btn" @tap="toBuy">去下单</button></view>
		</view>
		<view class="center">
			<view class="title">领积分</view>
			<view class="item"><text class="icon">&#xe779;</text><view class="detail"><view>签到</view><view class="tip">签到1次可获得{{signInSend}}积分</view></view><button class="item-btn" @tap="toSignin">去签到</button></view>
		</view>
	</view>
</template>

<script>
	import {
		getDataOne,getData
	} from '@/common/api/point.js'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				totalPoint:0,
				onePoint:0,  //一个积分抵现多少
				sevenDaySend:0, //签到满7天赠送多少积分
				signInSend:0, //每次签到赠送多少积分
				toMoney:'关闭' // 积分抵现
			}
		},
		computed: {
			...mapState(['hasLogin', 'userId'])
		},
		async onLoad() {
			this.initData()
		},
		methods: {
			async initData() {
				const req = {
					userId: this.userId
				}
				const res = await getDataOne(req)
				if (res.length > 0) {
					this.totalPoint = res[0].point
				}
				const data = await getData(req)
				if (data.length > 0) {
					this.onePoint = data[0].data.onePoint
					this.sevenDaySend = data[0].data.sevenDaySend
					this.signInSend = data[0].data.signInSend
					this.toMoney = data[0].data.toMoney
				}
			},
			toBuy(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			toSignin(){
				uni.navigateTo({
					url: '/pages/point/signin'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		flex-direction: column;
		.header{
			height: 80px;
			width: 100%;
			background-image: linear-gradient(90deg,#6b6c85,#3a4053);
			color: #fff;
			font-size: 12px;
			.point-total{
				padding-top: 15px;
				padding-left: 15px;
				.point-total__value{
					display: inline-block;
					font-size: 24px;
					font-weight: 500;
				}
				.point-total__txt{
					display: inline-block;
					margin-left: 10px;
				}
			}
		}
		.center{
			margin: 0px 15px 0 15px;
			.title{
				font-size: 15px;
				color: #333;
				font-weight: 700;
				margin-top: 15px;
			}
			.item{
				.icon{
					font-size: 38px;
				}
				.detail{
					display: inline-block;
					margin-left: 10px;
					.tip{
						font-size: 8px;
					}
				}
				.item-btn{
					float: right;
					margin-top: 16px;
					display: inline-block;
					width: 66px;
					height: 24px;
					line-height: 22px;
					border-color: #38f;
					color: #38f;
					font-size: 10px;
					border: 1px solid #1989fa;
					border-radius: 999px;
				}
			}
		}
	}
</style>
